<template>
  <div class="performance">
    <!--总览-->
    <div class="performance-summary">
      <!--{{admin}}-->
      <div class="summary-item">
        <div class="summary-item-label">姓名</div>
        <div class="summary-item-value">{{admin.name}}</div>
      </div>
      <div class="summary-item">
        <div class="summary-item-label">订单总额</div>
        <div class="summary-item-value">{{'10'}}</div>
      </div>
    </div>
    <!--搜索条件-->
    <!--订单列表-->
    <div class="performance-table">
      <el-table :data="orderList">
        <el-table-column
          prop="id"
          width="80"
          label="订单号">
        </el-table-column>
        <el-table-column
          prop="price"
          width="300"
          label="订单价格">
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  import {SUCCESS_CODE, FETCH_ADMIN_PERFORMANCE_FAILED} from '@/config/config'

  export default {
    name: 'performance',
    props: ['admin'],
    data() {
      return {
        orderList: [],
        search: {
          createTime: [],
        }
      }
    },
    methods: {
      ...mapActions('adminManage', ['getAdminPerformance'])
    },
    watch: {
      'admin.id': function (val) {
        this.getAdminPerformance().then(result => {
          if (result.status === SUCCESS_CODE) {
            this.orderList = result.data.results
            console.log(result)
          } else {
            this.$swal(FETCH_ADMIN_PERFORMANCE_FAILED, '', 'error')
          }
        })
      }
    }
  }
</script>

<style scoped lang="stylus">
  .performance
    font-family 微软雅黑

    .performance-summary
      font-size 15px
      border-bottom 1px solid lightgray
      padding-bottom 5px
      display flex

      .summary-item
        flex 1

        .summary-item-label
          display inline-block

          &:after
            content ':'


        .summary-item-value
          display inline-block
</style>
